<template lang="pug">
.cp-product-list(v-loading="loading")
  p.title
    span 产品列表
    span.add-product(@click="showDialog=true") 添加
  el-table.list(:data="productList", highlight-current-row, size="mini", :row-class-name="tableRowClassName", @row-click="clickProductRow", v-loading="loadingProducts")
    el-table-column(align="center", show-overflow-tooltip, prop="name", label="产品名称")
      template(slot-scope="scope")
        el-input(v-model="scope.row.name", v-show="scope.row.isEdit")
        span(v-text="scope.row.name", v-show="!scope.row.isEdit")
    el-table-column(align="center", label="操作", min-width="48px")
      template(slot-scope="scope")
        el-tooltip(content="编辑", v-show="!scope.row.isEdit")
          i.icon-act.el-icon-edit(@click="editProduct(scope.row, scope.$index)")
        el-tooltip(content="删除", v-show="!scope.row.isEdit")
          i.icon-act.el-icon-delete(@click="deleteProduct(scope.row, scope.$index)")
        el-tooltip(content="确定", v-show="scope.row.isEdit")
          i.icon-act.el-icon-check(@click="insertProduct(scope.row, scope.$index)")
        el-tooltip(content="取消", v-show="scope.row.isEdit")
          i.icon-act.el-icon-close(@click="cancleProduct(scope.row, scope.$index)")
  el-dialog(title="产品名称", width="20%", :visible.sync="showDialog")
    el-input(v-model="productName", placeholder="请输入产品名称")
    .dialog-footer(slot="footer")
      el-button(@click="showDialog=false") 取消
      el-button(type="primary", @click="saveProduct") 保存
</template>

<script>
import { mapGetters } from 'vuex';
import ProductData from '@/data/product';

export default {
  name: 'productlist',
  props: {
    detail: Object
  },
  data() {
    return {
      loading: true,
      showDialog: false,
      productList: [],
      cacheList: [],
      loadingProducts: false,
      highLightProductId: null,
      productName: null
    };
  },
  methods: {
    tableRowClassName ({ row }) {
      if (this.highLightProductId === row.id) {
        return 'focus-row';
      }

      return '';
    },
    clickProductRow (row) {
      this.highLightProductId = row.id;
    },
    saveProduct () {
      this.productList.push({
        id: '008',
        name: this.productName
      });
      this.showDialog = false;
    },
    //
    editProduct (row, index) {
      this.cacheList[index] = Object.assign({}, this.productList[index]);
      this.$set(this.productList[index], 'isEdit', true);
    },
    deleteProduct (row, index) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productList.splice(index, 1);
        this.$message.success('删除成功');
        // this.loadingStaffs = true;
        // ManApi.deleteStaff({ id: row.employeeId }).then((result) => {
        //   this.loadingStaffs = false;
        //   if (!result.status) {
        //     this.staffList.splice(index, 1);
        //     this.staffListTotal = this.staffListTotal - 1;
        //     this.$message.success('删除成功');
        //   } else {
        //     this.$message.error(`删除失败：${result.comment}`);
        //   }
        // }).catch((error) => {
        //   console.log(JSON.stringify(error));
        // });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    insertProduct (row, index) {
      this.productList[index].isEdit = false;
    },
    cancleProduct (row, index) {
      if (this.cacheList[index]) {
        this.$set(this.productList, `${index}`, this.cacheList[index]);
      } else {
        this.deleteOrderTerms(index);
      }
    },
  },
  watch: {
    highLightProductId () {
      this.$emit('change', this.highLightProductId);
    }
  },
  computed: {
    ...mapGetters([])
  },
  mounted () {
    setTimeout(() => {
      this.loading = false;
      this.productList = ProductData.productList;
      this.highLightProductId = this.productList[0].id;
      this.cacheList = this.productList.slice();
    }, 1000);
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
.cp-product-list
  .title
    position: relative
    font-size: 14px
    padding-left: 8px
    @include hlfc(32px, 14px, #999, 500)
    .add-product
      display: inline-block
      position: absolute
      top: 0
      right: 16px
      color: #409EFF
  .list
    border: 1px solid #ebeef5
    border-bottom: 0
  .el-table
    .focus-row td
      background: lightgoldenrodyellow
</style>
